<template>
    <view class="pagebox">
        <uni-card class="order" v-for="(item,index) in lists" :key="index">
            <view slot="title">
                <view class="order-header">
                    <view class="ordersn">项目：{{item.order.project_name}}</view>
                    <view class="timer">
                        <uni-icons custom-prefix="iconfont" type="icon-shizhong" size="20"></uni-icons>
                        {{item.add_time}}
                    </view>
                </view>
                
            </view>
            <view class="content">
                <view class="goods_name justify-between">
                    <view class="title">{{item.order.address}}</view>
                    <view class="status_name status_1">{{item.status_name}}</view>
                </view>
                <view class="skulist">
                    <view class="skuone" v-for="(val,ind) in item.goods" :key="ind">{{val.name}} x {{val.num}},<cc-copyBtn v-if="val.url" :colors="'复制链接'" :copyText="val.url"></cc-copyBtn></view>
                </view>
            </view>
            <view slot="actions" class="justify-between footers">
                <view class="user">
                    <view class="headimg">
                        <image :src="item.client.str_headimg" mode="widthFix"></image>
                    </view>
                    <view class="nickname">{{item.client.username}}</view>
                </view>
                <view class="action justify-around" v-if="type == 'all_buy'">
                    <button type="primary" size="mini" v-if="item.status == 0">接单采购</button>
                    <button type="default" size="mini" v-if="item.status == 1">发货</button>
                </view>
                <view class="action justify-around" v-else>
                    <button type="warn" size="mini" v-if="item.status == 0" @click="del(item.id,index)">删除</button>
                </view>
            </view>
        </uni-card>
        
        <Procure :type="type" @add="add"></Procure>
    </view>
    
</template>

<script>
    
    import Procure from '@/components/menu/procure.vue'
    export default{
        name:"procurelist",
        components: {
            Procure
        },
        data(){
            return{
                lists:[],
                page:1,
                last_page:1,
                type:''
            }
        },
        onPullDownRefresh(){
            var _this = this
            setTimeout(function () {
                uni.stopPullDownRefresh();
                _this.lists = []
                _this.page = 1
                _this.getlists()
            }, 500);
        },
        onReachBottom(){
            if(this.page<this.last_page){
                this.page +=1
                this.getlists()
            }
        },
        onLoad(option) {
            this.type = option.type
        },
        onShow(){
            this.lists = []
            this.page = 1
            this.getlists()
        },
        methods:{
            del(id,index){
                var _this = this
                uni.showModal({
                    content:'是否确认删除该订单，删除后不可恢复',
                    success:function(c){
                        if(c.confirm){
                            _this.$api.post(`buy/del`,{id:id}).then((res)=>{
                                _this.lists.splice(index,1)
                            })
                        }
                    }
                })
            },
            getlists(){
                this.$api.get(`buy/lists?type=${this.type}&page=${this.page}`).then(({data})=>{
                    this.lists = this.lists.concat(data.data)
                    this.last_page = data.last_page
                })
            }
        }
    }
</script>

<style lang="less">

    .addorderbox{
        width: 680rpx;
        min-height: 550rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }
    .addpropbox{
        width: 680rpx;
        min-height: 550rpx;
        max-height: 930rpx;
        overflow-y: scroll;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }
    .title-line{
        text-indent: 20rpx;
        position: relative;
        font-weight: bold;
        color: #9B9BA3;
        font-size: 30rpx;
        width: 700rpx;
        margin: 0 auto;
        &::before{
            content: " ";
            position: absolute;
            width: 6rpx;
            height: 30rpx;
            background: #52A0F3;
            border-radius: 3rpx;
            left: 0;
            top:6rpx;
        }
    }
    
    .order{
        .order-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            .ordersn{
                color: #000;
                font-weight: 600;
            }
            .timer{
                font-size: 26rpx;
                color: #3a3a3a;
                display: flex;
                align-items: center;
            }
        }
        .content{

            .goods_name{
                // height: 60rpx;
                .title{
                    font-weight: bold;
                    width: 80%;
                }
                .status_name{
                    
                }
            }
            .skulist{
                .skuone{
                    font-size: 28rpx;
                    line-height: 44rpx;
                }
            }
        }
        .footers{
            height: 80rpx;
           .user{
               display: flex;
               align-items: center;
              .headimg{
                  width: 60rpx;
                  height: 60rpx;
                  margin-right: 10rpx;
                  image{
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 50%;
                  }
              } 
           }
            .action{
                 align-items: center;
                button{
                    height: 60rpx;
                }
            } 
        }
    
    }
    
    
</style>